<%@page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">


<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/favicon.ico">

    <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">-->

    <script src="/static/js/jquery-3.4.0.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>

    <title>学生信息管理系统</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/dashboard.css">
    <!--<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>-->
    <!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>-->
    <!--<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
    <style>
        [v-cloak] {
            display: none !important;
        }
    </style>
</head>

<body>
    <div id="app">
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">学生信息管理系统</a>
                </div>
                <%
                    HttpSession s = request.getSession();
                %>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><h4 style="color: white">你好，<%=s.getAttribute("username")%>!</h4></li>
                        <li><a href="#"><span class="glyphicon glyphicon-warning-sign"></span></a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li>
                        <li><a href="#"><img style="height: 30px;width: 30px" @click="changehref()" src="<%=s.getAttribute("img")%>" alt="..." class="img-circle"></a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-folder-open"></span></a></li>
                    </ul>

                </div>
            </div>
        </nav>
        <div class="container-fluid col-lg-10">
            <div class="row">
                <div class="col-sm-15 col-md-10 col-lg-10 sidebar">
                    <ul class="nav nav-sidebar">
                        <li v-bind:class="{active:shows==1}" @click="show1()"><a href="/demo/SysM/admin"><span class="glyphicon glyphicon-home"></span>用户账户管理</a></li>
                        <li v-bind:class="{active:shows==2}" @click="show2()"><a href="/demo/stuInfo/index"><span class="glyphicon glyphicon-bookmark"></span>学生档案资料</a></li>
                        <li v-bind:class="{active:shows==3}" @click="show3()"><a href="/demo/Clazz/gotoget"><span class="glyphicon glyphicon-list-alt"></span>班级信息</a></li>
                        <li v-bind:class="{active:shows==4}" @click="show4()"><a href="/demo/course/index"><span class="glyphicon glyphicon-list"></span>课程信息</a></li>
                        <li v-bind:class="{active:shows==5}" @click="show5()"><a href="/demo/design/index"><span class="glyphicon glyphicon-tasks"></span>班级课程管理</a></li>
                        <li v-bind:class="{active:shows==6}" @click="show6()"><a href="/demo/Pay/gotoget"><span class="glyphicon glyphicon-usd"></span>学生缴费</a></li>
                        <li v-bind:class="{active:shows==7}" @click="show7()"><a href="/demo/score/index4"><span class="glyphicon glyphicon-blackboard"></span>学生成绩</a></li>
                        <li v-bind:class="{active:shows==8}" @click="show8()"><a href="/demo/SysM/logout"><span class="glyphicon glyphicon-off"></span>退出系统</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-50" style="margin-top: 10px" v-cloak>

            <div class="container">
                <div class="row">
                    <div class="col-xs-60 col-sm-60 col-md-60 col-lg-60 btn-group" role="group" aria-label="..."
                        style="background: darkgray;height: 30px;padding-top: 5px">
                        <span class="glyphicon glyphicon-send" aria-hidden="true"><strong> 班级信息管理</strong></span>
                    </div>
                    <div class="col-xs-20 col-sm-20 col-md-20 col-lg-20">
                        <div class="col-xs-15 col-sm-15 col-md-15 col-lg-15"
                            style="padding-right: 0px;padding-top: 3px">
                            <h5>用户编号:</h5>
                        </div>
                        <div class="col-xs-45 col-sm-45 col-md-45 col-lg-45" style="margin-top: 5px">
                            <input class="form-control" type="text" placeholder="请输入班级号码" v-model="clazz"></input>
                        </div>
                    </div>
                    <div class="col-xs-20 col-sm-20 col-md-20 col-lg-20">
                        <div class="col-xs-30 col-sm-30 col-md-30 col-lg-30" style="padding: 1px;margin-top: 5px">
                            <button type="button" @click="search()" class="form-control">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                搜索
                            </button>
                        </div>
                        <div class="col-xs-30 col-sm-30 col-md-30 col-lg-30" style="padding: 1px;margin-top: 5px">
                            <button class="form-control"><span class="glyphicon glyphicon-random"
                                    aria-hidden="true"></span>
                                清空搜索条件
                            </button>
                        </div>
                    </div>
                    <div style="margin-top: 5px" class="col-xs-20 col-sm-20 col-md-20 col-lg-20 btn-group" role="group"
                        aria-label="...">
                        <button type="button" @click="gotoadd()"
                            class="col-xs-15 col-sm-15 col-md-15 col-lg-15  btn btn-default">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                            新增
                        </button>

                        <button type="button" data-toggle="modal" data-target="#myModal2"
                                class="col-xs-15 col-sm-15 col-md-15 col-lg-15 btn btn-default">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                            删除
                        </button>
                    </div>

                </div>
            </div>

            <div class="container" style="margin-top: 20px">

                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <td><input v-model="showall" v-on:click="selectall()" type="checkbox">全选</td>
                        <td>年级</td>
                        <td>班级</td>
                        <td>教室</td>
                        <td>年制</td>
                        <td>专业</td>
                        <td>班主任</td>
                        <td>备注</td>
                        <td>操作</td>
                    </thead>
                    <tr v-show="!administrators[i].del" v-for="(administrator,i) in administrators">
                        <td><input v-on:click="listen(i)" v-model="administrators[i].show" type="checkbox"></td>
                        <td @click="selectanywhere(i)">{{administrators[i].grade}}</td>
                        <td @click="selectanywhere(i)">{{administrators[i].clazz}}</td>
                        <td @click="selectanywhere(i)">{{administrators[i].classroom}}</td>
                        <td @click="selectanywhere(i)">{{administrators[i].year}}</td>
                        <td @click="selectanywhere(i)">{{administrators[i].profession}}</td>
                        <td @click="selectanywhere(i)">{{administrators[i].master}}</td>
                        <td @click="selectanywhere(i)">{{administrators[i].remark}}</td>

                        <td>
                            <div>
                                <u style="cursor:pointer;" data-toggle="modal" data-target="#myModal"
                                   @mouseenter="changeCheck(administrators[i].clazz)">删除</u>
                                <u style="cursor:pointer;" @click="gotoedit(administrators[i].clazz)">修改</u>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-xs-20 col-sm-20 col-md-20 col-lg-20" style="padding-top: 20px">
                        <div class="col-xs-15 col-sm-15 col-md-15 col-lg-15"
                             style="padding-right: 0px;padding-top: 6px">
                            共{{currentPage}}页,每页
                        </div>
                        <div class="col-xs-20 col-sm-20 col-md-20 col-lg-20"
                             style="padding-left: 0px;padding-right: 2px">
                            <select v-model="size"  class="form-control" value="请选择">
                                <option value="1" >1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option selected value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                            </select>
                        </div>
                        <div class="col-xs-15 col-sm-15 col-md-15 col-lg-15" style="padding-left: 0px;padding-top: 6px">
                            行
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row clearfix">
                    <div class="col-md-60 column">
                        <ul class="pagination">
                            <li @click="previous()">
                                <span>Prev</span>
                                <%--<a href="#">Prev</a>--%>
                            </li>
                            <li v-for="i in currentPage" :key="i"
                                @mouseenter="mouseEnter(i)" @mouseleave="mouseLeave"
                                @click="array(i)"  :class="{active:i==isActive,inactive:i!==isActive}" >
                                <a href="#">
                                    {{i}}
                                    <span class="sr-only">(current)</span>
                                </a>
                            </li>
                            <li @click="nextPage()">
                                <span>Next</span>
                                <%--<a href="#">Next</a>--%>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            删除信息
                        </h4>
                    </div>
                    <div class="modal-body">
                        是否删除选中信息？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            取消
                        </button>
                        <button type="button" v-on:click="deleteOne()" data-dismiss="modal" class="btn btn-primary">
                            删除
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            删除信息
                        </h4>
                    </div>
                    <div class="modal-body">
                        是否删除该条信息？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            取消
                        </button>
                        <button type="button" v-on:click="deletechoose()" data-dismiss="modal" class="btn btn-primary">
                            删除
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
    <script src="/static/js/vue.js"></script>
    <script type="text/javascript">
        var checkDel = -1;
        var vue = new Vue({
            el: '#app',
            data: {
                shows:3,
                clazz:"",
                administrator:{
                    grade:'',
                    clazz:'',
                    classroom:'',
                    year:'',
                    profession:'',
                    master:'',
                    remark:'',
                },
                administrators : [],

                showall: false,
                num: 1,

                size:4,
                currentPage:1,
                nowPage:1,
                isActive:0,

            },
            watch:{
                size:function () {
                    $.ajax({
                        url: '/demo/Clazz/getByArray',
                        type: 'POST',
                        data: {'currentPage': 1, 'size': this.size},
                        // dataType:'json',
                        success: function (result) {
                            vue.administrators = result;
                            $.ajax({
                                url:'/demo/Clazz/getNumber',
                                type:'POST',
                                data:{},
                                // dataType:'json',
                                success:function(result){
                                    vue.currentPage = Math.ceil(result/vue.size);
                                    console.log(vue.currentPage);
                                }
                            });
                        }
                    });
                }
            },
            methods: {
                mouseEnter(index){
                    this.isActive = index;
                },
                //   鼠标移除
                mouseLeave(){
                    this.isActive=null;
                },
                previous:function(){
                    if(this.nowPage !== 1) {
                        this.nowPage = this.nowPage - 1;
                        $.ajax({
                            url: '/demo/Clazz/getByArray',
                            type: 'POST',
                            data: {'currentPage': this.nowPage, 'size': this.size},
                            // dataType:'json',
                            success: function (result) {
                                vue.administrators = result;
                            }
                        });
                    }
                },
                nextPage:function(){
                    if(this.nowPage !== this.currentPage) {
                        this.nowPage = this.nowPage + 1;
                        $.ajax({
                            url: '/demo/Clazz/getByArray',
                            type: 'POST',
                            data: {'currentPage': this.nowPage, 'size': this.size},
                            // dataType:'json',
                            success: function (result) {
                                vue.administrators = result;
                            }
                        });
                    }
                },
                array:function(i){
                    this.nowPage = i;
                    $.ajax({
                        url:'/demo/Clazz/getByArray',
                        type:'POST',
                        data:{'currentPage':this.nowPage,'size':this.size},
                        // dataType:'json',
                        success:function(result){
                            vue.administrators = result;
                            $.ajax({
                                url:'/demo/Clazz/getNumber',
                                type:'POST',
                                data:{},
                                // dataType:'json',
                                success:function(result){
                                    vue.currentPage = Math.ceil(result/vue.size);
                                }
                            });
                        }
                    });
                },
                get:function(){
                    $.ajax({
                        url:'/demo/Clazz/get',
                        type:'GET',
                        data:{},//'clazz':vue.clazz
                        //dataType:'json',
                        success:function(result){
                            vue.administrators = result;
                            $.ajax({
                                url:'/demo/Clazz/getNumber',
                                type:'POST',
                                data:{},
                                // dataType:'json',
                                success:function(result){
                                    vue.currentPage = Math.ceil(result/vue.size);
                                }
                            });
                        }
                    });
                },
                show1:function(){
                    this.shows=1;
                },
                show2:function(){
                    this.shows=2;
                },
                show3:function(){
                    this.shows=3;
                },
                show4:function(){
                    this.shows=4;
                },
                show5:function(){
                    this.shows=5;
                },
                show6:function(){
                    this.shows=6;
                },
                show7:function(){
                    this.shows=7;
                },
                show8:function(){
                    this.shows=8;
                },
                gotoadd:function () {
                    window.location.href="/demo/Clazz/gotoadd";
                },
                gotoedit:function (i) {
                    window.location.href="/demo/Clazz/gotoedit?clazzId=" + i;
                },
                search:function () {
                    $.ajax({
                        url:'/demo/Clazz/getOne',
                        type:'POST',
                        data:{'clazzId':this.clazz},
                        success:function(result){
                            vue.administrators = result;
                        }
                    });
                    // window.location.href="/demo/Clazz/getone?clazzId=1606";
                },
                add: function () {
                    // this.administrators[i].num++;
                    $.ajax({
                        url:'/demo/Clazz/gotoadd',
                        type:'GET',
                        data:{},
                        success:function (result) {
                            alert(result);
                        }
                    });
                },
                sub: function (i) {
                    this.administrators[i].num--;
                },

                keyup: function (x, i) {
                    if (x < 0) {
                        alert("输入框不能为负数！！！")
                        this.administrators[i].num = 0;
                    }
                },
                deleteOne: function () {
                    this.administrators.splice(checkDel, 1);
                    window.location.href="/demo/Clazz/delete?clazz=" + checkDel;
                },
                deletechoose: function () {
                    for (var i = 0; i < vue.administrators.length; i++) {
                        if (this.administrators[i].show) {
                            $.ajax({
                                url:'/demo/Clazz/delete',
                                type:'POST',
                                data:{"id": vue.administrators[i].id},
                                // dataType:'json',
                                success:function(result){
                                    vue.administrators.splice(i, 1);
                                    i=i-1;
                                    for(var ind in vue.sIList){
                                        console.log("vue.sIList[" + ind + "].show--" + vue.administrators[ind].show)
                                    }
                                }
                            });
                        }
                    }

                    $.ajax({
                        url: '/demo/Clazz/getByArray',
                        type: 'POST',
                        data: {'currentPage': 1, 'size': this.size},
                        // dataType:'json',
                        success: function (result) {
                            vue.sIList = result;
                            $.ajax({
                                url:'/demo/Clazz/getNumber',
                                type:'POST',
                                data:{},
                                // dataType:'json',
                                success:function(result){
                                    vue.currentPage = Math.ceil(result/vue.size);
                                    console.log(vue.currentPage);
                                }
                            });
                        }
                    });
                    location.reload();
                },
                selectall: function () {
                    if (this.showall == true) {
                        for (var i = 0; i < this.administrators.length; i++) {
                            this.administrators[i].show = false;
                        }
                    }
                    if (this.showall == false) {
                        for (var i = 0; i < this.administrators.length; i++) {
                            this.administrators[i].show = true;
                        }
                    }
                },
                changeCheck: function (i) {

                    checkDel = i;

                },
                selectanywhere: function (index) {
                    if (this.administrators[index].show == true)
                        this.administrators[index].show = false;
                    else {
                        this.administrators[index].show = true;
                    }
                },
                listen: function (index) {
                    if (this.administrators[index].show == true) {
                        this.administrators[index].show = false;
                    } else {
                        this.administrators[index].show = true;
                    }
                    var mark = 9;
                    for (var i = 0; i < this.administrators.length; i++) {
                        if (this.administrators[i].show == true) {
                            mark++;
                        } else {
                            mark--;
                        }
                    }
                    if (mark == 18) {
                        this.showall = true;
                    } else {
                        this.showall = false;
                    }
                }
            },
        });
        $(function(){
            vue.get();
        })
    </script>

</body>

</html>